<template>
  <a-drawer
    title="排放源"
    width="405"
    :closable="false"
    @close="onClose"
    :visible="visible"
  >
    <div class="item">
      <p class="text">
        您可以从系统内置的行业参数推荐值库中选择您需要用到的参数。如未能找到您需要的参数，您也可以在“添加条目”标签中自行录入。
      </p>
      <a-input-search
        @search="onSearch"
        style="width: 100%; margin-bottom: 10px"
        placeholder="请输入排放源"
      />
      <div
        @click="openItemInfo(item)"
        v-for="(item, index) in accountingItem"
        :key="index"
        class="item_row"
      >
        <div class="first_row">
          <div>
            {{ item.itemName }}
          </div>
          <div>
            {{ JSON.parse(item.defaultValue).emission_factor }}
          </div>
          <div>(t/Nm3)</div>
        </div>

        <div v-show="ItemInfo == item.id" class="info">
          <div>所属分类：暂无数据</div>
          <div>参数名称：{{ item.itemName }}</div>
          <div>参数值：{{ JSON.parse(item.defaultValue).emission_factor }}</div>
          <div>单位：暂无数据</div>
          <div>适用行业：暂无数据</div>
          <div>参数来源：国家发改委企业温室气体排放核算方法与报告指南</div>
        </div>
      </div>
      <div class="addItem" v-if="IfAddEntry">+ 添加条目</div>
    </div>
    <!-- {{ accountingItem }} -->
  </a-drawer>
</template>

<script>
import ARow from "ant-design-vue/es/grid/Row";
import ACol from "ant-design-vue/es/grid/Col";
import { getAction, postAction } from "@/api/manage";
import { getAccountingItem } from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";
export default {
  name: "RoleDataruleModal",
  mixins: [ListMixin],
  components: { ACol, ARow },
  data() {
    return {
      ItemInfo: "",
      functionId: "",
      roleId: "",
      boundaruId: "",
      visible: false,
      tabList: [
        {
          key: "1",
          tab: "数据规则",
        },
        {
          key: "2",
          tab: "按钮权限",
        },
      ],
      activeTabKey: "1",
      url: {
        datarule: "/sys/role/datarule",
      },
      IfAddEntry: true,
      dataruleList: [],
      dataruleChecked: [],
      accountingItem: [],
    };
  },
  methods: {
    onSearch() {},
    openItemInfo(item) {
      this.ItemInfo = item.id;
    },
    loadData() {
      getAccountingItem({ boundaryId: this.boundaruId }).then((res) => {
        if (res.success) {
          this.accountingItem = res.result;
          //   console.log(this.accountingItem);
        }
      });
    },
    saveDataruleForRole() {
      if (!this.dataruleChecked || this.dataruleChecked.length == 0) {
        this.$message.warning("请注意，现未勾选任何数据权限!");
      }
      let params = {
        permissionId: this.functionId,
        roleId: this.roleId,
        dataRuleIds: this.dataruleChecked.join(","),
      };
      //   console.log("保存数据权限", params);
      postAction(this.url.datarule, params).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    show(functionId, selectObj, Boolean) {
      if (Boolean && Boolean == "equipment") {
        this.IfAddEntry = false;
      } else {
        this.IfAddEntry = true;
      }
      this.onReset();
      this.functionId = functionId;
      this.boundaruId = selectObj.id;
      this.visible = true;
      this.loadData();
    },
    onClose() {
      this.visible = false;
      this.onReset();
    },
    onTabChange(key) {
      this.activeTabKey = key;
    },
    onReset() {
      this.functionId = "";
      this.roleId = "";
      this.boundaruId = "";
      this.dataruleList = [];
      this.dataruleChecked = [];
    },
  },
};
</script>

<style scoped lang="scss">
.item {
  display: flex;
  flex-direction: column;

  .item_row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f2f2f2;
    border-radius: 20px;
    padding: 4px 10px;
    margin-bottom: 6px;
    .first_row {
      display: flex;
      cursor: pointer;
      flex-direction: row;
      justify-content: space-between;
    }
    .info {
      border-top: 1px solid #ccc;
      padding-top: 8px;
      font-size: 12px;
      margin-top: 10px;
      div {
        margin-bottom: 4px;
      }
    }
  }
  .text {
    font-size: 12px;
  }
  .addItem {
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 8px 0;
    font-size: 14px;
    color: #006eff;
  }
}
</style>